<template>
	<view class="pages">
		<view class="form padding">
			<view class="form-line">
				<view class="form-line-text">
					车牌：
				</view>
				<input class="uni-input font-12" type="text" placeholder="请输入车牌" v-model="licensePlate" />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					车型：
				</view>
				<input class="uni-input font-12" type="text" placeholder="请输入车型" v-model="carName" />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					座位：
				</view>
				<input class="uni-input font-12" type="number" placeholder="请输入座位" v-model="carSeatNum" />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					状态：
				</view>
				<uni-data-checkbox v-model="status" :localdata="items"></uni-data-checkbox>
			</view>
		</view>
		<view class="addBtn">
			<button type="primary" @click="add()" style="width: 400upx;border-radius: 60upx;">{{ id ? '编辑' : '添加' }}车辆</button>
		</view>
	</view>
</template>

<script>
	import { getInfo,add,edit } from '@/api/system/vehicle'
	export default {
		data() {
			return {
				id: 0,
				carName: '',
				licensePlate: '',
				carSeatNum: 0,
				status: 0,
				items: [
					{value: 0, text: '正常'},
					{value: 1, text: '维修'},
				],
				queryStatus: false,
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
				this.getInfo();
			}
		},
		methods: {
			/**
			 * 获取车辆信息
			 */
			getInfo(){
				this.$modal.loading("请求中");
				getInfo(this.id).then(res => {
					this.$modal.closeLoading();
					console.log('车辆详情' , res);
					
					this.licensePlate = res.data.licensePlate;
					this.carName = res.data.carName;
					this.carSeatNum = res.data.carSeatNum;
					this.status = parseInt(res.data.status);
				}).catch(err => {
					console.log('车辆详情失败' , err);
				});
			},
			/**
			 * 编辑车辆
			 */
			add(){
				if(!this.licensePlate){
					this.$modal.msgError("请输入车牌");
				}else if(!this.carName){
					this.$modal.msgError("请输入车型");
				}else if(this.carSeatNum <= 0){
					this.$modal.msgError("请输入座位");
				}else if(!this.queryStatus){
					this.queryStatus = true;
					this.$modal.loading("请求中");
					this.handleAdd();
				}
			},
			/**
			 * 处理方法
			 */
			handleAdd(){
				let params = {
					carName: this.carName,
					licensePlate: this.licensePlate,
					carSeatNum: this.carSeatNum,
					status: this.status,
				};
				
				if(this.id > 0){
					params.id = this.id;
						
					edit(params).then(() => {
						this.queryStatus = false;
						this.$modal.closeLoading();
						this.$modal.msgSuccess('编辑成功' , () => {
							setTimeout(() => {
								this.$tab.redirectTo('/pages/vehicle/index');
							} , 2000);
						});
					}).catch(err => {
						this.queryStatus = false;
						console.log('修改车辆失败' , err);
					});
				}else{
					add(params).then(() => {
						this.queryStatus = false;
						this.$modal.closeLoading();
						this.$modal.msgSuccess('添加成功' , () => {
							setTimeout(() => {
								this.$tab.redirectTo('/pages/vehicle/index');
							} , 2000);
						});
					}).catch(err => {
						this.queryStatus = false;
						console.log('新增车辆失败' , err);
					});
				}
			},
			radioChange(e){
				this.status = e.detail.value;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.flexCenter {
		display: flex;
		align-items: center;
	}

	.flexCenterBetween {
		@extend .flexCenter;
		justify-content: space-between;
	}

	.form {
		background-color: #FFFFFF;

		.form-line {
			@extend .flexCenter;
			padding: 20upx 0upx;
			border-bottom: 1px solid #E2E2E2;
			
			&:last-child{
				border-bottom: none;
				padding-bottom: 0px;
			}
		}
	}
	
	.radios{
		@extend .flexCenter;
	}
	
	::v-deep .uni-label-pointer{
		@extend .flexCenter;
	}

	.addBtn {
		width: 400upx;
		margin: 100upx auto;
	}
</style>